<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: rgba(0,0,0,0.7);
        }
        .box {
            width: 800px;
            height: 42px;
            background: #fff url('images/wifi.png') right center no-repeat;
            margin: 200px auto;
            border-radius: 8px;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li {
            float: left;
            width: 83px;
            height: 42px;
            text-align: center;
            font: 500 16px/42px '';
            cursor: pointer;
        }
        span {
            position: absolute;
            left:0;
            top:0;
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat;
        }
    </style>
</head>
<body>
<div class="box">
    <span></span>
    <ul>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
        <li>首页新闻</li>
    </ul>
</div>
<script>
    window.onload = function () {
        var  liArr = document.getElementsByTagName('li');
        var liWidth = liArr[0].offsetWidth;
        var span = document.getElementsByTagName('span')[0];
        //计数器
        var count = 0;
        
        for(var i = 0;i<liArr.length;i++){
            liArr[i].index = i;
            liArr[i].onmouseover = function () {
                animate(span,this.index*liWidth)
            };
            liArr[i].onmouseout= function () {
                animate(span,count*liWidth)
            };
            liArr[i].onclick= function () {
                count = this.index;
                animate(span,count*liWidth)
            }
        }

        //动画封装
        function animate(ele,traget) {
            clearInterval(ele.timer);
            //定义定时器
            ele.timer = setInterval(function () {
                var step = (traget-ele.offsetLeft)/10;
                //对步长加工
                step = step>0?Math.ceil(step):Math.floor(step);
                //动画原理：目标位置=当前位置+步长
                ele.style.left = ele.offsetLeft+step+'px';
                if(Math.abs(traget-ele.offsetLeft)<=Math.abs(step)){
                    ele.style.left=traget;
                    clearInterval(ele.timer);
                }
            },30)
        }

    }
</script>
</body>
</html>